<template>
  <div class="search">
    <div class="hearder">
      <van-search
        v-model="keyword"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #left>
          <i class="iconfont iconjiantou" @click="$router.back()"></i>
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 历史记录 -->
    <div class="history" v-show="searchList.length === 0">
      <h3>历史记录</h3>
      <van-icon @click="keywordList = []" name="delete-o" />
      <div class="itemList">
        <span
          class="item"
          v-for="(obj, index) in keywordList"
          :key="index"
          @click="keyBtn(obj)"
        >
          {{ obj }}
        </span>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="result" v-show="searchList.length">
      <p class="title">搜索结果</p>
      <router-link
        v-for="item in searchList"
        :key="item.id"
        :to="`/article/${item.id}`"
        class="item"
      >
        <span class="text">{{ item.title }}</span>
        <i class="iconfont iconjiantou1"></i>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getPostSearchAPI } from "../apis/news";
import { getSearchKeyword, setSearchKeyword } from "../utils/localData";
export default {
  data() {
    return {
      keyword: "",
      searchList: [],
      keywordList: getSearchKeyword(),
    };
  },
  methods: {
    //   搜索
    async onSearch() {
      if (this.keyword.length === 0) {
        return this.$toast.fail("请输入关键词");
      }
      const res = await getPostSearchAPI({ keyword: this.keyword });
      //   console.log(res);
      this.searchList = res.data.data;
      console.log(this.searchList);
      //储存搜索关键词
      this.keywordList.unshift(this.keyword);
      //  数组去重
      this.keywordList = [...new Set(this.keywordList)];
      // 限制数组长度10条
      if (this.keywordList.length >= 10) {
        this.keywordList.length = 10;
      }
    },
    // 点击关键词
    keyBtn(theItem) {
      // 把点击的关键词，把关键词显示到输入框中
      this.keyword = theItem;
      this.onSearch();
    },
  },
  watch: {
    keyword() {
      if (this.keyword === "") {
        // 清空数组，隐藏搜索结果面板
        this.searchList = [];
      }
    },
    keywordList() {
      // 搜索关键词数组有变化，就存储到本地
      setSearchKeyword(this.keywordList);
    },
  },
};
</script>

<style lang="less" scoped>
.history {
  padding: 20px;
  font-size: 16px;

  .itemList {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 5px;
      font-size: 13px;
      margin-right: 10px;
      margin-top: 5px;
      border: 1px solid #ccc;
    }
  }
}
.result {
  padding: 20px;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    .text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>